<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <!-- 放置表单 -->
        <el-form ref="userForm" label-width="120px" :model="userInfo" :rules="rules" style="margin-left: 120px; margin-top:30px">
          <el-form-item label="姓名:" prop="username">
            <el-input v-model="userInfo.username" style="width:300px" />
          </el-form-item>

          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" disabled style="width:300px" />
          </el-form-item>

          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item label="员工头像">
            <!--
              图片上传组件
              核心作用：上传之后得到的新图片 作为用户的新头像来使用 需要提交给更新接口
              问题：提交接口发生在父组件  新的图片url子组件中
               1. props + $emit
               2. ref 子组件实例对象 （可以随便的调用子组件中的方法 可以随便的获取子组件中的响应式属性并且可以进行赋值操作）

              方案一：ref  缺点: 1.必须知道子组件中的属性名才能获取到  2.操作起来以命令式的方式繁琐
              方案二：v-model  通过prop的双向绑定 简化数据的获取和赋值
                  组件身上写了v-model
                    1. 通过v-bind绑定了一个名称为 value的属性 -> props:{value}
                    2. 绑定了一个名称为input的事件 ($emit('input', 上传之后的新的图片url))
                    3. 在绑定的事件回调函数中 自动把触发自定义事件时传出来的参数赋值给通过v-model绑定的数据

              双向绑定：M - V  数据变视图变  视图变数据也变化
             -->
            <upload-img v-model="userInfo.staffPhoto" />
          </el-form-item>

          <!-- 保存个人信息 -->
          <el-row class="inline-info" type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" @click="confirm">保存更新</el-button>
              <el-button @click="$router.back()">返回</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserDetailById, saveUserDetailById } from '@/api/user'
export default {
  data() {
    return {
      userInfo: {},
      rules: {}
    }
  },
  mounted() {
    this.hGetDetail()
  },
  methods: {
    async hGetDetail() {
      const res = await getUserDetailById(this.$route.query.id)
      this.userInfo = res.data
    },
    async confirm() {
      // 更新处理
      // 拿到子组件中的新的图片url
      await saveUserDetailById(this.userInfo)
      this.$message({
        type: 'success',
        message: '更新信息成功'
      })
      this.$router.back()
    }
  }
}
</script>
